<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h2>{{title}}</h2>
        <h2 v-if="flag">Vue is awesome?</h2>
        <h2 v-else>Vue is so easy?</h2>
        <button @click="flag=!flag">点击切换</button>

        <template v-if="ok">
            <h1>Title</h1>
            <p>Paragraph 1</p>
            <p>Paragraph 2</p>
        </template>

        <div>
            <h1>你的分数等级</h1>
            <h1 v-if="socre>90">A</h1>
            <h1 v-else-if="socre>80">B</h1>
            <h1 v-else-if="socre>70">C</h1>
            <h1 v-else>F</h1>
        </div>

        <div v-show="show" @click="show=!show" >v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display</div>

        <div v-if="obj.person">
            <h2>v-if 经典用法  (ajax的异步数据) </h2>
            <h2>username -- {{obj.person.username }}</h2>
            <h2>word -- {{obj.person.word }}</h2>
        </div>
    </div>

    <script>
        const vm = new Vue({
            data:{
                title:"v-if & v-show 条件渲染",
                flag:true,
                ok:false,
                socre:75,
                show:true,
                obj:{

                }

            },
            mounted(){
                document.getElementsByTagName('title')[0].innerHTML = this.title

                setTimeout(()=>{
                    this.obj={
                        person:{
                            username:"TongTong",
                            word:"DayDayUp"
                        }
                    }
                },3000)
            }
        }).$mount("#app")
    </script>
</body>
</html>